<template>
    <div>
        <Content :style="{padding: '24px',  background: '#fff'}">
            <el-form ref="queryParams" inline label-position="right" label-width="120px" v-model="queryParams">
                <el-form-item :label="$t('商户号')">
                    <el-input size="small" v-model="queryParams.userId" :placeholder="$t('商户号')" @keyup.enter.native="search()" style="width: 180px" />
                </el-form-item>
                <el-form-item :label="$t('批次号')">
                    <el-input size="small" v-model="queryParams.billId" :placeholder="$t('批次号')" @keyup.enter.native="search()" style="width: 180px" />
                </el-form-item>
                <el-form-item :label="$t('入库时间')">
                    <el-date-picker size="small" value-format="yyyy-MM-dd" type="daterange" @change="cbstime" v-model="others.bstime" :start-placeholder="$t('开始时间')" :end-placeholder="$t('开始时间')" style="width: 250px"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('sku编码')">
                    <el-input size="small" v-model="queryParams.skuCode" :placeholder="$t('sku编码')" style="width: 180px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item :label="$t('商品名')">
                    <el-input size="small" v-model="queryParams.productName" :placeholder="$t('商品名')" style="width: 180px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item :label="$t('备注')">
                    <el-input size="small" v-model="queryParams.remark" :placeholder="$t('备注')" style="width: 180px" @keyup.enter.native="search()" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" v-on:click="search()" type="primary">{{$t('搜索')}}</el-button>
                    <el-button size="small" v-on:click="reset()">{{$t('重置')}}</el-button>
                </el-form-item>
            </el-form>
            <el-row style="margin-bottom:12px">
                <el-alert type="warning" effect="dark">
                    <span style="line-height: 28px;font-size: 14px">{{$t('今天')}} {{$t('签收')}}：<font class="fprice">{{signData.today}}</font>箱，{{$t('昨天')}} {{$t('签收')}}：<font class="fprice">{{signData.yestoday}}</font>箱，{{$t('以往')}} {{$t('签收')}}：<font class="fprice">{{signData.preday}}</font>箱
                    </span>
                    <el-button @click="refreshData()" :loading="dataLoading" style="float: right;margin-left: 10px" size="small">{{$t('刷新')}}</el-button>
                </el-alert>
            </el-row>
            <el-row style="margin-bottom:12px">
                <label style="color: #f00">{{$t('排序')}}：</label>
                <el-select v-model="queryParams.orderBy" @change="getList()" style="width:140px;margin-right:10px" size="small">
                    <el-option :value="1" :label="$t('箱号')">{{$t('箱号')}}</el-option>
                    <el-option :value="2" :label="$t('签收时间')">{{$t('签收时间')}}</el-option>
                </el-select>
                <label style="color: #f00">{{$t('入库状态')}}：</label>
                <el-button size="small" :type="queryParams.state==''?'success':'default'" @click="searchOrder('','')">{{$t('全部')}}</el-button>
                <el-button size="small" :type="queryParams.state=='0'?'success':'default'" @click="searchOrder('0','')">{{$t('待处理')}}
                </el-button>
                <el-button size="small" :type="queryParams.state=='1'?'success':'default'" @click="searchOrder('1','')">{{$t('已入库')}}
                </el-button>
                <el-divider direction="vertical" />
                <label style="color: #f00">{{$t('海运费用')}}：</label>
                <el-button size="small" :type="queryParams.billFeeState==null?'success':'default'" @click="searchBillFeeOrder(null,null)">{{$t('全部')}}</el-button>
                <el-button size="small" :type="queryParams.billFeeState==0?'success':'default'" @click="searchBillFeeOrder(0,1)">{{$t('待支付')}}</el-button>
                <el-button size="small" :type="queryParams.billFeeState==1?'success':'default'" @click="searchBillFeeOrder(1,1)">{{$t('已支付')}}</el-button>
                <el-divider direction="vertical" />
                <label style="color: #f00">{{$t('上架费用')}}：</label>
                <el-button size="small" :type="queryParams.feeState==null?'success':'default'" @click="searchFeeOrder(null,null)">{{$t('全部')}}</el-button>
                <el-button size="small" :type="queryParams.feeState==0?'success':'default'" @click="searchFeeOrder(0,1)">{{$t('待扣费')}}</el-button>
                <el-button size="small" :type="queryParams.feeState==1?'success':'default'" @click="searchFeeOrder(1,1)">{{$t('已扣费')}}</el-button>
                <font>*已入库的,才能扣费</font>
            </el-row>
            <div style="margin: 10px;overflow: hidden">
                <div>
                    <el-pagination :current-page="page.current" background :page-size="page.pageSize" layout="total, prev, pager, next" :total="page.total" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
            <el-table ref="multipleTable" @selection-change="handleSelectionChange" @select="selectSelection" @select-all="handleSelectionChange" size="small" :data="storageBills" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column fixed="left" align="center" :label="$t('扣费')" width="120">
                    <template slot-scope="scope">
                        <template v-if="scope.row.state==1">
                            <span class="state-error-full" v-if="scope.row.feeState==0">{{$t('待扣费')}}</span>
                            <template v-else>
                                <span class="state-success-full">{{$t('已扣费')}}</span>
                                <div class="state-success">{{scope.row.fee}}</div>
                            </template>
                        </template>
                        <template v-else>
                            {{$t('未上架')}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column fixed="left" align="center" :label="$t('海运费')" width="120">
                    <template slot-scope="scope">
                        <span class="state-success-full" v-if="scope.row.billFeeState==1">{{$t('已支付')}}</span>
                        <template v-else>
                            <span class="state-error-full">{{$t('待支付')}}</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="billId" fixed="left" :label="$t('仓库')" width="120">
                    <template slot-scope="scope">
                        <div style="margin-top: 5px">{{scope.row.warehouseName}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="billId" fixed="left" :label="$t('批次号')" width="150">
                    <template slot-scope="scope">
                        <div>ID:{{scope.row.id}}</div>
                        <div>{{scope.row.billId}}</div>
                        <div style="margin-top: 5px">箱号：{{scope.row.boxNo}}</div>
                        <!--  <div v-if="scope.row.orderState>=2">
                            <span v-if="scope.row.orderBack==0" class="state-primary-full">待处理</span>
                            <span v-if="scope.row.orderBack==1" class="state-primary-full">处理中</span>
                            <span v-if="scope.row.orderBack==2" class="state-warning-full">待客户确认</span>
                            <span v-if="scope.row.orderBack==4" class="state-success-full">已完成</span>
                        </div>
                        <div v-else>
                            <span v-if="scope.row.orderState==0" class="state-primary-full">待出货</span>
                            <span v-if="scope.row.orderState==1" class="state-info-full">在途</span>
                            <span v-if="scope.row.orderState==-1" class="state-error-full">已取消</span>
                        </div> -->
                        <!-- <el-button style="margin-top: 5px" size="small" type="danger" v-on:click="toSign(scope.row)" v-if="scope.row.orderState==1 || scope.row.orderState==0">确认到仓</el-button> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="thumb" fixed="left" :label="$t('商品名')" width="180">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.thumb" style="width: 80px;height: auto;" fit="fit"></el-image>
                        <div class="">{{scope.row.productName}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="skuCode" fixed="left" :label="$t('sku编码')" width="180">
                    <template slot-scope="scope">
                        <div>sku编码:{{scope.row.skuCode}}</div>
                        <div>规格属性：{{scope.row.variationName}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="skuCode" :label="$t('长宽高')" width="100">
                    <template slot-scope="scope">
                        <div>{{scope.row.length}}，{{scope.row.width}}，{{scope.row.height}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="quantity" :label="$t('数量')" width="120">
                </el-table-column>
                <el-table-column align="center" prop="confirmQuantity" :label="$t('实际到货')" width="120">
                </el-table-column>
                <el-table-column align="center" prop="remark" :label="$t('备注')" width="120">
                </el-table-column>
                <el-table-column align="center" prop="boxNo" :label="$t('入库时间')" width="150">
                    <template slot-scope="scope">
                        <span v-if="scope.row.state==1">
                            {{scope.row.okTime | long2datetime}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <el-pagination background :current-page="page.current" :page-size="page.pageSize" layout="total, prev, pager, next" :total="page.total" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </Content>
    </div>
</template>
<script>
import { getStorageBillItemList } from "@/api/ProductApi"
export default {
    name: 'StorageBill',
    data() {
        return {
            dataLoading: false,
            signData: {
                today: 0,
                yestoday: 0,
                preday: 0
            },
            loading: false,
            multipleSelection: [],
            queryParams: {


            },
            others: {
                bstime: []
            },

            storageBillItem: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            storageBills: [

            ],

        };
    },
    components: {

    },
    computed: {
        billCount: function() {

            return this.$store.state.notify.notifyCount.billCount;

        },
        billCountSign: function() {

            return this.$store.state.notify.notifyCount.billCountSign;
        },
        billCountBack: function() {

            return this.$store.state.notify.notifyCount.billCountBack;
        }
    },
    mounted: function() {
        this.getList();
        this.refreshData();
    },
    methods: {
        refreshData: function() {
            var me = this;
            me.dataLoading = true;
            me.$http.post("/stastis/billSignData.do", {

            }).then(response => {
                me.dataLoading = false;
                var body = response;
                if (body.status == 0) {

                    me.signData = body.obj;

                }

            }, response => {
                me.dataLoading = false;
            });
        },
        clearSelection: function(val) {

            if (val) {
                this.storageBills.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row, true);
                });
            } else {

                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(selection) {
            this.multipleSelection = selection;
        },
        selectSelection: function(selection, row) {
            this.multipleSelection = selection;
        },
        confirmOk: function(row) {

        },
        confirmBack: function(row) {

        },
        toSign: function(row) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.showLoading();
                    me.$http.post("/storagebill/doSign.do", { id: row.billId }).then(response => {
                        var body = response;
                        if (body.status == 0) {

                            me.successMessage("确认成功");
                            me.getList();
                        } else {
                            me.errorMessage(body.info);
                        }
                        me.hideLoading();
                    }).catch(error => {
                        me.hideLoading();
                        me.errorMessage("服务器或网络异常");
                    });
                },
                onCancel: function() {

                }
            });
        },
        searchFeeOrder: function(feeState, state) {

            this.queryParams.orderState = null;
            this.queryParams.orderBack = null;
            this.queryParams.feeState = feeState;
            this.queryParams.state = state;
            this.search();
        },
        searchBillFeeOrder: function(feeState, state) {

            this.queryParams.orderState = null;
            this.queryParams.orderBack = null;
            this.queryParams.feeState = null;
            this.queryParams.billFeeState = feeState;
            this.queryParams.state = state;
            this.search();
        },

        searchOrder: function(state, back) {
            this.queryParams.state = state;
            this.queryParams.feeState = null;
            this.search();
        },
        cbstime: function(value) {
            if (value) {
                this.queryParams.btime = value[0];
                this.queryParams.etime = value[1];
            } else {
                this.queryParams.btime = "";
                this.queryParams.etime = "";
            }
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = {};
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            me.multipleSelection = [];
            var params = me.queryParams;

            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            getStorageBillItemList(params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.storageBills = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }


    }
}
</script>
<style scoped>
.fprice {
    font-size: 18px;
}
</style>